<template>
  <div class="productIndex">
    <div class="banner">
      <img src="../../../static/images/productBanner.jpg">
    </div>
    <div class="container">
      <div class="productCenter">
        <h2>Products</h2>
        <el-row>
          <el-col :span="24">
            <router-link to="/products/Mobile-Crusher">
              <el-card body-style="{ padding: '0px' }">
                <img src="../../../static/images/proindexmobile.jpg" class="image">
                <div style="padding: 14px;">
                  <h3>Mobile Crushers</h3>
                  <p>Kefid explores and develops this series mobile stone crushing station( portable crusher ),which is the crushing equipments for rocks and construction waste, and expands the conception of primary and secondary crushing operation.</p>
                </div>
              </el-card>
            </router-link>
          </el-col>
          <el-col :span="24">
            <router-link to="/products/Crushing-Plant">
              <el-card body-style="{ padding: '0px' }">
                <img src="../../../static/images/proindexcrusher.jpg" class="image">
                <div style="padding: 14px;">
                  <h3>Stationary Crushers</h3>
                  <p>From large primary jaws and gyratories to cones and VSI for tertiary and quaternary finishing, Kefid has the right crusher and crusher parts to meet your material reduction requirements. We win the trust and respect from our worlwide customers because of our perfect service and crushing plants.</p>
                </div>
              </el-card>
            </router-link>
          </el-col>
          <el-col :span="24">
            <router-link to="/products/Grinding-MIll">
              <el-card body-style="{ padding: '0px' }">
                <img src="../../../static/images/proindexmill.jpg" class="image">
                <div style="padding: 14px;">
                  <h3>Grinding Mill</h3>
                  <p>Grinding is the required process when size reduction of below 5-20 mm is needed. Grinding is a powdering or pulverizing process of many kinds of minerals ( Barite, Calcite, Limestone, Quartz, Gypsum, etc ).</p>
                </div>
              </el-card>
            </router-link>
          </el-col>
          <el-col :span="24">
            <router-link to="/products/Screening-Washing">
              <el-card body-style="{ padding: '0px' }">
                <img src="../../../static/images/proindexwashing.jpg" class="image">
                <div style="padding: 14px;">
                  <h3>Washing & Screening</h3>
                  <p>Kefid screen can separate the stuff of different size range. It is the most general means of size control in aggregates processing. Washing machine is a kind of cleaning equipment of international advanced level for sand and slag pellets...</p>
                </div>
              </el-card>
            </router-link>
          </el-col>
          <el-col :span="24">
            <router-link to="/products/Ore-Benefication">
              <el-card body-style="{ padding: '0px' }">
                <img src="../../../static/images/proindexore.jpg" class="image">
                <div style="padding: 14px;">
                  <h3>Ore Beneficiation</h3>
                  <p>Kefid explores and develops this series mobile stone crushing station(portable crusher),which is the crushing equipments for rocks and construction waste, and expands the conception of primary and secondary crushing operation.</p>
                </div>
              </el-card>
            </router-link>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
// import Chat from '@/components/common/Chat'
export default {
  // components: {

  // },
  data () {
    return {

    }
  },
  methods: {

  }
}
</script>
<style lang='css' scoped>
.productIndex{
  margin-top: 52px;
}
.productCenter .el-col-24{
  margin-bottom: 1rem;
}
.productCenter h2{
  text-align: center;
  font-size: 1.6rem;
}
.productCenter h3{
  font-size: 1.6rem;
}
.productCenter p{
  font-size: 1.4rem;
}
.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}
</style>
<style>
.productCenter .el-card__body{
  padding: 0;
}
</style>
